<!DOCTYPE html>
<html>
<head>
    <script src="${request.contextPath}/statics/js/echarts.js"></script>
    <script src="${request.contextPath}/statics/js/highcharts.js"></script>
    <script src="${request.contextPath}/statics/js/exporting.js"></script>
    <script src="${request.contextPath}/statics/js/sankey.js"></script>
    <script src="${request.contextPath}/statics/js/oldie.js"></script>
    <script src="${request.contextPath}/statics/js/highcharts-zh_CN.js"></script>
<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?ac60c3773958d997a64b55feababb4a1";
  var s = document.getElementsByTagName("script")[0];
  s.parentNode.insertBefore(hm, s);
})();
</script>



    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>欢迎页</title>
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <link rel="stylesheet" href="${request.contextPath}/statics/css/bootstrap.min.css">
</head>
<body>
<div class="panel panel-default">
    <div class="panel-heading">Wiz 数组跟踪分析平台</div>
   <!-- <div id="app4"  style="width: 600px;height:400px;" ></div>-->
    <div id="container" style="min-width:400px;height:400px"></div>
    <div id="container2" style="min-width:400px;height:400px"></div>
    </div>

</div>
</body>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
  /*  var myChart = echarts.init(document.getElementById('app4'));*/
    var container = echarts.init(document.getElementById('container'));
    var container2 = echarts.init(document.getElementById('container2'));
    // 指定图表的配置项和数据
/*    var option = {
        title: {
            text: 'ECharts 入门示例'
        },
        tooltip: {},
        legend: {
            data:['销量']
        },
        xAxis: {
            data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
        },
        yAxis: {},
        series: [{
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
        }]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);*/

    var chart = Highcharts.chart('container',{
        chart: {
            type: 'area'
        },
        title: {
            text: '美苏核武器库存量'
        },
        subtitle: {
            text: '数据来源: <a href="https://thebulletin.metapress.com/content/c4120650912x74k7/fulltext.pdf">' +
            'thebulletin.metapress.com</a>'
        },
        xAxis: {
            allowDecimals: false
        },
        yAxis: {
            title: {
                text: '核武库国家'
            },
            labels: {
                formatter: function () {
                    return this.value / 1000 + 'k';
                }
            }
        },
        tooltip: {
            pointFormat: '{series.name} 制造 <b>{point.y:,.0f}</b>枚弹头'
        },
        plotOptions: {
            area: {
                pointStart: 1940,
                marker: {
                    enabled: false,
                    symbol: 'circle',
                    radius: 2,
                    states: {
                        hover: {
                            enabled: true
                        }
                    }
                }
            }
        },
        series: [{
            name: '美国',
            data: [null, null, null, null, null, 6, 11, 32, 110, 235, 369, 640,
                1005, 1436, 2063, 3057, 4618, 6444, 9822, 15468, 20434, 24126,
                27387, 29459, 31056, 31982, 32040, 31233, 29224, 27342, 26662,
                26956, 27912, 28999, 28965, 27826, 25579, 25722, 24826, 24605,
                24304, 23464, 23708, 24099, 24357, 24237, 24401, 24344, 23586,
                22380, 21004, 17287, 14747, 13076, 12555, 12144, 11009, 10950,
                10871, 10824, 10577, 10527, 10475, 10421, 10358, 10295, 10104]
        }, {
            name: '苏联/俄罗斯',
            data: [null, null, null, null, null, null, null, null, null, null,
                5, 25, 50, 120, 150, 200, 426, 660, 869, 1060, 1605, 2471, 3322,
                4238, 5221, 6129, 7089, 8339, 9399, 10538, 11643, 13092, 14478,
                15915, 17385, 19055, 21205, 23044, 25393, 27935, 30062, 32049,
                33952, 35804, 37431, 39197, 45000, 43000, 41000, 39000, 37000,
                35000, 33000, 31000, 29000, 27000, 25000, 24000, 23000, 22000,
                21000, 20000, 19000, 18000, 18000, 17000, 16000]
        }]
    });

    Highcharts.chart('container2', {
        title: {
            text: 'Highcharts 桑基图'
        },
        series: [{
            keys: ['from', 'to', 'weight'],
            point: {
                // 鼠标划过节点时高亮相连的连接节点
                events: {
                    mouseOver: function() {
                        if(this.isNode) {
                            Highcharts.each(this.linksFrom, function(p) {
                                var newColor = new Highcharts.color(p.color).setOpacity(1);
                                p.graphic.element.setAttribute('fill', 'rgba(' + newColor.rgba.join() + ')');
                            });
                            Highcharts.each(this.linksTo, function(p) {
                                var newColor = new Highcharts.color(p.color).setOpacity(1);
                                p.graphic.element.setAttribute('fill', 'rgba(' + newColor.rgba.join() + ')');
                            });
                        }
                    },
                    mouseOut: function() {
                        if(this.isNode) {
                            Highcharts.each(this.linksFrom, function(p) {
                                var newColor = new Highcharts.color(p.color).setOpacity(0.5);
                                p.graphic.element.setAttribute('fill', 'rgba(' + newColor.rgba.join() + ')');
                            });
                            Highcharts.each(this.linksTo, function(p) {
                                var newColor = new Highcharts.color(p.color).setOpacity(0.5);
                                p.graphic.element.setAttribute('fill', 'rgba(' + newColor.rgba.join() + ')');
                            });
                        }
                    }
                }
            },
            data: [
                ['巴西', '葡萄牙', 5 ],
                ['巴西', '法国', 1 ],
                ['巴西', '西班牙', 1 ],
                ['巴西', '英国', 1 ],
                ['加拿大', '葡萄牙', 1 ],
                ['加拿大', '法国', 5 ],
                ['加拿大', '英国', 1 ],
                ['墨西哥', '葡萄牙', 1 ],
                ['墨西哥', '法国', 1 ],
                ['墨西哥', '西班牙', 5 ],
                ['墨西哥', '英国', 1 ],
                ['美国', '葡萄牙', 1 ],
                ['美国', '法国', 1 ],
                ['美国', '西班牙', 1 ],
                ['美国', '英国', 5 ],
                ['葡萄牙', '安哥拉', 2 ],
                ['葡萄牙', '塞内加尔', 1 ],
                ['葡萄牙', '摩洛哥', 1 ],
                ['葡萄牙', '南非', 3 ],
                ['法国', '安哥拉', 1 ],
                ['法国', '塞内加尔', 3 ],
                ['法国', '马里', 3 ],
                ['法国', '摩洛哥', 3 ],
                ['法国', '南非', 1 ],
                ['西班牙', '塞内加尔', 1 ],
                ['西班牙', '摩洛哥', 3 ],
                ['西班牙', '南非', 1 ],
                ['英国', '安哥拉', 1 ],
                ['英国', '塞内加尔', 1 ],
                ['英国', '摩洛哥', 2 ],
                ['英国', '南非', 7 ],
                ['南非', '中国', 5 ],
                ['南非', '印度', 1 ],
                ['南非', '日本', 3 ],
                ['安哥拉', '中国', 5 ],
                ['安哥拉', '印度', 1 ],
                ['安哥拉', '日本', 3 ],
                ['塞内加尔', '中国', 5 ],
                ['塞内加尔', '印度', 1 ],
                ['塞内加尔', '日本', 3 ],
                ['马里', '中国', 5 ],
                ['马里', '印度', 1 ],
                ['马里', '日本', 3 ],
                ['摩洛哥', '中国', 5 ],
                ['摩洛哥', '印度', 1 ],
                ['摩洛哥', '日本', 3 ]
            ],
            type: 'sankey',
            name: 'Sankey demo series'
        }]
    });



</script>
</html>